<!--  -->
<template>
  <div class="detail-container">
    <!-- 头部导航 -->
    <van-nav-bar
      title="商品详情"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" size="24" />
      </template>
      <template #right>
        <van-icon name="scan" color="#ffffff" size="24" />
      </template>
    </van-nav-bar>
    <!-- 主体内容 -->
    <div class="content">
      <!-- 轮播部分 -->
      <div class="swiper-area" v-if="detail.pics">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ff6a00">
          <van-swipe-item v-for="(item, index) in detail.pics" :key="index">
            <img
              :src="item.pics_big_url"
              alt="图片"
              @click="openPreview(index)"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="price">{{ detail.goods_price }}元</div>
      <div class="name">{{ detail.goods_name }}</div>
      <div class="info">
        <div class="title">图文详情</div>
        <div v-html="detail.goods_introduce"></div>
      </div>
    </div>
    <!-- 底部工具栏 -->
    <div class="bottom-bar">
      <div class="left">
        <div class="left-item service">
          <van-icon name="service" size="20" />
          <span>客服</span>
        </div>
        <div class="left-item share" @click="toShare">
          <van-icon name="share" size="20" />
          <span>分享</span>
        </div>
        <div class="left-item cart">
          <van-icon name="shopping-cart" size="20" />
          <span>购物车</span>
        </div>
      </div>
      <div class="right">
        <div class="add-cart" @click="addCart">加入购物车</div>
        <div class="buy-now">立即购买</div>
      </div>
    </div>
    <!-- 分享面板 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="shareList"
    />
    <!-- 加入购物车的地步回弹的效果 -->
    <van-popup
      v-model="popUpShow"
      closeable
      round
      close-icon="close"
      position="bottom"
      @closed="closePop"
    >
      <div class="pop-main">
        <div class="header">
          <div class="avatar">
            <img :src="detail.goods_big_logo" alt="商品封面" />
          </div>
          <div class="info">
            <div class="good-price">
              价格:<span>{{ detail.goods_price }}</span
              >元
            </div>
            <div class="good-num">
              库存:<span>{{ detail.goods_number }}</span
              >件
            </div>
            <div>请选择产品属性</div>
          </div>
        </div>
        <!-- 商品参数 -->
        <div class="attrs" v-if="detail.attrs && detail.attrs.length">
          <div
            class="attr-list"
            v-for="item in detail.attrs"
            :key="item.attr_id"
          >
            <div class="attr-title">{{ item.attr_name }} :</div>
            <div class="attr-val" v-if="item.attr_value">
              <div
                class="attr-item"
                :class="{ active: index === 0 }"
                v-for="(subItem, index) in item.attr_value.split(',')"
                :key="subItem"
                v-if="index < 5"
              >
                {{ subItem }}
              </div>
            </div>
            <div class="attr-val" v-else>暂无介绍</div>
          </div>
        </div>
        <!-- 购买数量 -->
        <div class="buy-num">
          <div class="title">购买数量</div>
          <div class="btn-group">
            <van-button :disabled="addNum <= 1" @click="reduce">-</van-button>
            <van-button class="num">{{ addNum }}</van-button>
            <van-button :disabled="addNum > detail.goods_number" @click="add"
              >+</van-button
            >
          </div>
        </div>
        <!-- 加入购物车 -->
        <div class="add-cart" @click="addToCart">加入购物车</div>
      </div>
    </van-popup>
    <!-- 图片预览 -->
    <van-image-preview
      v-model="showPreview"
      :images="previewImgs"
      :start-position="currentIndex"
      closeable
      show-indicators
      @change="changePic"
      @closed="closePreview"
    >
      <template v-slot:currentIndex>第{{ currentIndex }}页</template>
    </van-image-preview>
  </div>
</template>

<script>
import {
  NavBar,
  Icon,
  ShareSheet,
  Swipe,
  SwipeItem,
  Popup,
  Button,
  Toast,
  ImagePreview,
} from "vant";
import { getGoodDeatil } from "@/network/goods";
export default {
  data() {
    return {
      showShare: false,
      popUpShow: false,
      showPreview: false,
      shareList: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      previewImgs: [],
      currentIndex: 0,
      detail: {},
      addNum: 1,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getDetailData();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //去分享
    toShare() {
      this.showShare = true;
    },
    //点击加入购物车
    addCart() {
      this.popUpShow = true;
    },
    //关闭遮罩层
    closePop() {
      this.addNum = 1;
    },
    //加入购物车
    addToCart() {
      const product = {};
      //添加购物车所需的商品信息
      product.id = this.detail.goods_id;
      product.price = this.detail.goods_price || 100;
      product.img = this.detail.goods_small_logo;
      product.name = this.detail.goods_name;
      product.maxNum = this.detail.goods_number;
      product.isChecked = false;
      //取出缓存中的购物车列表
      const cartList = JSON.parse(localStorage.getItem("cartList")) || [];
      //先判断当前商品之前有没有被添加过
      let index = cartList.findIndex((item) => item.id === product.id);
      if (index !== -1) {
        //当前商品之前已经被添加过,则商品数量+1
        cartList[index].num += this.addNum;
      } else {
        //没有添加过,则添加到数组中去
        product.num = this.addNum;
        cartList.unshift(product);
      }
      //添加到缓存中去
      localStorage.setItem("cartList", JSON.stringify(cartList));
      Toast.success("添加购物车成功");
      this.popUpShow = false;
    },
    //减少商品数量
    reduce() {
      this.addNum--;
    },
    //增加商品数量
    add() {
      this.addNum++;
    },
    //切换预览图片
    changePic(index) {
      this.currentIndex = index;
    },
    //打开preview
    openPreview(index) {
      this.showPreview = true;
      this.currentIndex = index
    },
    //关闭preview
    closePreview() {
      this.showPreview = false;
    },
    //拉取商品详情数据
    async getDetailData() {
      const res = await getGoodDeatil(this.$route.params.id);
      if (res.message.pics) {
        res.message.pics.forEach((item) => {
          this.previewImgs.push(item.pics_big_url);
        });
        this.detail = res.message;
      }
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [ShareSheet.name]: ShareSheet,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
};
</script>
<style scoped>
.detail-container {
  padding-top: 46px;
  padding-bottom: 56px;
}
/* 头部导航 */
.van-nav-bar {
  background-color: #ff6a00;
}
.detail-container >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
/* 轮播部分 */
.swiper-area img {
  width: 100vw;
}
.detail-container >>> .my-swipe .van-swipe__indicator {
  width: 10px;
  height: 10px;
}
/* 价格部分 */
.price {
  color: red;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
}
/* 名字 */
.name {
  font-size: 16px;
  padding: 0 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* 信息部分 */
.info {
  font-size: 16px;
}
.info .title {
  padding: 10px;
  font-size: 20px;
}
/* 底部工具栏 */
.bottom-bar {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  font-size: 16px;
  border-top: 1px solid #ccc;
  background-color: #fff;
}
.bottom-bar .left,
.bottom-bar .right {
  display: flex;
}
.bottom-bar .left-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 54px;
  font-size: 14px;
}
.bottom-bar .right {
  flex: 1;
}
.bottom-bar .right > div {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-weight: bold;
}
.bottom-bar .right .add-cart {
  background-color: #ffa500;
}
.bottom-bar .right .buy-now {
  background-color: #eb4450;
}
.detail-container >>> .van-popup__close-icon {
  font-size: 24px;
  font-weight: bold;
  color: #f00;
}
/* 底部遮罩层 */
.pop-main {
  padding: 20px;
}
.pop-main .header {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.pop-main .header .avatar {
  margin-right: 20px;
}
.pop-main .header .avatar img {
  width: 100px;
}
.pop-main .header .good-price span,
.pop-main .header .good-num span {
  font-size: 24px;
  color: red;
  font-weight: bold;
  margin: 0 4px;
}
.pop-main .header .info > div {
  margin-bottom: 10px;
}
.pop-main .attrs {
  font-size: 16px;
  border-bottom: 1px solid #ccc;
}
.pop-main .attr-list {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.pop-main .attr-list .attr-title {
  font-size: 18px;
  font-weight: bold;
  margin-right: 12px;
}
.pop-main .attr-list .attr-val {
  display: flex;
  flex-wrap: wrap;
}
.pop-main .attr-list .attr-item {
  padding: 6px 12px;
  margin: 4px;
  border-radius: 20px;
  background-color: #ccc;
}
.pop-main .attr-list .attr-item.active {
  color: #fff;
  background-color: #ff6a00;
}
.pop-main .buy-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
.pop-main .buy-num .title {
  font-size: 18px;
}
.pop-main .buy-num >>> .van-button {
  width: 30px;
  height: 30px;
  background-color: skyblue;
}

.pop-main .buy-num .btn-group .num {
  margin: 0 2px;
}
.pop-main .add-cart {
  height: 40px;
  margin-top: 10px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  border-radius: 20px;
  background-color: #ff6a00;
}
</style>